iT邦幫忙

2024 iThome 鐵人賽

DAY 4
0

CSS 入門

CSS

  • CSS的語法規則由兩部分組成:選擇器、宣告敘述。
  • 宣告敘述可用來定義樣式
  • 選擇器可分為:通用選擇器、標籤選擇器、類別選擇器及id選擇器,主要用來指定要使用樣式的元素。

選擇器

  • 通用選擇器的表示法為:*
  • 標籤選擇器的表示法為標籤名,例如:pah1
  • 類別選擇器的表示法要結合標籤的class屬性,可在標籤中新增class屬性,並為其設定一個類別名稱:
<p class= "p2">段落2</p>

並在選擇時輸入.類別名稱,例:.p2,即可

  • id選擇器的表示法要結合標籤的id屬性,可在標籤中新增id屬性,並為其設定一個id名稱:
<p id= "p3">段落3</p>

並在選擇時輸入#id名稱,例:#p3,即可

  • 若要選擇多種選擇器,只要在不同選擇器中加入, 分隔即可
    https://ithelp.ithome.com.tw/upload/images/20240913/20169282nUqkp8CAWw.png
  1. 通用選擇器控制字體大小=18px
  2. 標籤選擇器p設定為紅色
  3. 類別選擇器.p2設定為藍色
  4. id選擇器#p3設定為紫色
  5. 同時選中.p2#p3並設定字體為:italic,顯示如下:
    https://ithelp.ithome.com.tw/upload/images/20240913/20169282rMQ93fMfdn.png

樣式

  • 背景:與背景相關的屬性都是以background開頭
屬性名稱 意義 可設定值
background-color 設定背景顏色 任意顏色皆可
background-image 設定背景圖片 圖片素材的url
background-rapeat 背景圖片填充方式 repeat-x:水平方向重複 repeat-y:垂直方向重複 no-repeat:圖片背景不重複延展
background-position 圖片背景定位方式 top、center、長度值
  • 文字:包括對齊方式、縮排、文字間隔
  1. text-indent:縮排
  2. text-align:對齊方式
  3. word-spacing:文字間隔
  4. letter-spacing:字元間隔
  5. text-transform:字母大小寫
  6. text-decoration:字元樣式
  • 邊框:可設定邊框樣式、寬度、顏色
  1. border-style:邊框樣式
  2. border-width:邊框寬度
  3. border-color:邊框顏色
  • 邊距:在版面設定中,CSS盒模型的概念非常重要,如下圖:
    https://ithelp.ithome.com.tw/upload/images/20240913/20169282oqwYSOoUXZ.jpg
  1. margin:可控制外邊距,上下左右分別加上top、bottom、left、right,即可分別控制
    margin-topmargin-bottommargin-leftmargin-right
  2. padding:可控制內邊距,同樣可分別控制上下左右邊
    padding-toppadding-bottompadding-leftpadding-right

以上就是今天的CSS入門的基礎內容,下篇將會介紹JavaScript的語法簡介!


上一篇
Day 3
下一篇
Day 5
系列文
從零開始學習TypeScript、Vue.js !!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言